<!--
Copyright (c) Microsoft Corporation.
Licensed under the MIT license.
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
    <title>Encrypt Power BI Data Source Credentials</title>
</head>

<body>
    <header class="col-lg-12 col-md-12 col-sm-12 shadow">
        <div>
            Encrypt Power BI Data Source Credentials
        </div>
    </header>
    <main class="row">
        <section id="text-container" class="col mb-8 ml-8">
            <div>
                <div>
                    <h5>Update data source</h5>
                    Encrypt the credentials of Power BI data source and update them using the API: 
                    <a href="https://docs.microsoft.com/en-us/rest/api/power-bi/gateways/updatedatasource">Update data source credentials</a>.
                    <br><br>
                    <h5>Add data source</h5>
                    Encrypt the credentials of Power BI data source and add new data source using the API: 
                    <a href="https://docs.microsoft.com/en-us/rest/api/power-bi/gateways/createdatasource">Add data source</a>.
                    <br><br>
                    <h5>Encrypt credentials</h5>
                    Get the encrypted credentials of Power BI data source.
                </div>
                <br>
                <div>Encryption code is present in the following files:
                    <ol>
                        <li>helper/authenticatedencryption.py</li>
                        <li>helper/asymmetrichigherkeyencryptionhelper.py</li>
                        <li>helper/asymmetric1024keyencryptionhelper.py</li>
                    </ol>
                </div>
                <div>Sample's code is present in the following files:
                    <ol>
                        <li>app.py</li>
                        <li>services/asymmetrickeyencryptor.py</li>
                        <li>services/updatecredentialsservice.py</li>
                        <li>services/addcredentialsservice.py</li>
						<li>services/getdatasource.py</li>
                    </ol>
                </div>
            </div>
        </section>
        <section id="input-container" class="input-container col mb-4 ml-5 mt-4">
            <div id="task-container">
                <h6>1. Select functionality</h6>
                <select name="functionality" id="functionality-select" class="input-element">
                    <option value="updateDatasource">Update data source</option>
                    <option value="addDatasource">Add data source</option>
                    <option value="encryptCredentials">Encrypt credentials</option>
                </select>
            </div>
            <!-- Update Data source Form -->
            <div class="update-datasource-container">
                <div class="row">
                    <div class="id-container">
                        <h6>Group ID</h6>
                        <input id="group-id" type="text" class="title input-element" name="title"
                            placeholder="E.g. 00000000-0000-0000-0000-000000000000" />
                    </div>
                    <br>
                    <div class="id-container">
                        <h6>Dataset ID</h6>
                        <input id="dataset-id" type="text" class="title input-element" name="title"
                            placeholder="E.g. 00000000-0000-0000-0000-000000000000" />
                    </div>
                </div>
                <br>
                <button id="get-datasources" class="btn btn-primary send-button">Get data sources</button>
                <br><br>
                <h6 class="datasource-deps">2. Choose a data source</h6>
                <select name="datasources-list" id="datasources-list" class="input-element datasource-deps">
                    <option value="Key">Choose data source</option>
                </select>
                <div class="gateway-container">
                    <h6>Gateway ID</h6>
                    <div id="gateway-output"></div>
                </div>
            </div>
            <!-- Add Datasource Form -->
            <div class="add-datasource-container">
                <div id="gateway-input">
                    <h6>Gateway ID</h6>
                    <input id="gateway-id" type="text" class="title input-element" name="title"
                        placeholder="E.g. 00000000-0000-0000-0000-000000000000" />
                </div>
                <br>
                <div class="row">
                    <div class="id-container" id="add-input-element">
                        <h6>Data source type</h6>
                        <input id="datasource-type" type="text" class="title input-element" name="title"
                            placeholder="E.g. SQL" />
                    </div>
                    <br>
                    <div class="id-container">
                        <h6>Data source name</h6>
                        <input id="datasource-name" type="text" class="title input-element" name="title"
                            placeholder="E.g. Sample data source" />
                    </div>
                </div>
                <br>
                <div>
                    <h6>Connection details</h6>
                    <input id="connection-details" type="text" class="title input-element" name="title"
                        placeholder='E.g. {"server":"MyServer","database":"MyDatabase"}' />
                </div>
            </div>

            <!-- Encrypt-Credentials Form -->
            <div class="encrypt-credentials-container">
                <h6>Gateway ID</h6>
                <input id="encrypt-gateway" type="text" class="title input-element" name="title"
                    placeholder="E.g. 00000000-0000-0000-0000-000000000000" />
            </div>

            <!-- Common credentials input -->
            <div id="credentials-input">
                <br>
                <div>
                    <h6 class="datasource-deps">Credential type</h6>
                    <select name="credentials-type" id="cred-type" class="input-element datasource-deps">
                        <option value="Key">Key credentials</option>
                        <option value="Basic">Basic credentials</option>
                        <option value="OAuth2">OAuth2 credentials</option>
                        <option value="Windows">Windows credentials</option>
                    </select>
                </div>
                <br>
                <div id="credential-key">
                    <h6 class="datasource-deps">Key credentials</h6>
                    <input id="key-credentials" class="input-element title datasource-deps" type="text" name="title"
                        placeholder="Key value" />
                </div>
                <div id="credential-windows">
                    <h6 class="datasource-deps"> Windows credentials</h6>
                    <input id="window-credentials-username" class="input-element title datasource-deps" type="text" name="title" placeholder="Username" />
                    <input id="window-credentials-password" class="input-element password-text title datasource-deps" type="password"
                        name="title" placeholder="Password" />
                </div>
                <div id="credential-oauth2">
                    <h6 class="datasource-deps"> OAuth2 credentials</h6>
                    <input id="oauth-credentials" class="input-element datasource-deps" type="text" name="title"
                        placeholder="Access token" />
                </div>
                <div id="credential-basic">
                    <h6 class="datasource-deps">Basic credentials</h6>
                    <input id="basic-credentials-username" class="input-element title datasource-deps" type="text"
                        name="title" placeholder="Username" />
                    <input id="basic-credentials-password" class="input-element title password-text datasource-deps" type="password"
                        name="title" placeholder="Password" />
                </div>
                <br/>
            </div>

            <!-- Update Datasource Form -->
            <div class="update-datasource-container">
                <h6 class="datasource-deps">Privacy level</h6>
                <select name="privacy-level" id="update-datasource-privacy-level" class="input-element datasource-deps">
                    <option value="None">None</option>
                    <option value="Private">Private</option>
                    <option value="Organizational">Organizational</option>
                    <option value="Public">Public</option>
                </select>
                <br><br>
                <div id="update-credentials-label">
                    <h6 id="update-creds-text" class="inactive-text">3. Set new credentials</h6>
                    <button id="update-credentials" class="btn btn-primary send-button">Update credentials</button>
                </div>
                <br>
            </div>

            <!-- Add Datasource Form -->
            <div class="add-datasource-container">
                <h6>Privacy level</h6>
                <select name="privacy-level" id="add-datasource-privacy-level" class="input-element">
                    <option value="None">None</option>
                    <option value="Private">Private</option>
                    <option value="Organizational">Organizational</option>
                    <option value="Public">Public</option>
                </select>
                <br><br>
                <div id="add-datasource-label">
                    <h6 id="add-creds-text" class="inactive-text">2. Add data source with credentials</h6>
                    <button id="add-datasource" class="btn btn-primary send-button">Add data source</button>
                </div>
            </div>

            <!-- Encrypt-Credentials Form -->
            <div class="encrypt-credentials-container">
                <div id="encrypt-button-container">
                    <h6 id="encrypt-creds-text" class="inactive-text">2. Get the encrypted credentials</h6>
                    <button id="encrypt-button" class="btn btn-primary send-button">Encrypt credentials</button>
                </div>
            </div>
        </section>
    </main>

    <!-- Modal to display success and error messages -->
    <div class="modal response-container" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 id="modal-title" class="modal-title"></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div id="modal-body" class="modal-body"></div>
          </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
    <script src="{{ url_for('static', filename='js/index.js') }}"></script>
</body>
</html>